<template>
  <div class="Contact-container">
    <div class="table-wrap">
      <v-skeleton-loader
        height="100%"
        v-if="loading"
        type="list-item@20"
      ></v-skeleton-loader>
      <Table
        v-else
        @add="openAddContact"
        @edit="openEditContact"
        @delete="openDeleteContact"
        :headers="tableHeaders"
        :items="items"
        addTooltip="Add ContactType"
        editTooltip="Edit ContactType"
        deleteTooltip="Delete ContactType"
        hide-default-footer
      >
      </Table>
    </div>
    <Dialog
      v-model="showDialog"
      @submit="save"
      :show-save="step !== 3"
      :title="dialogTitle"
      width="480"
    >
      <AddEditContactType
        v-if="step === 1 || step === 2"
        ref="addEditContactType"
      ></AddEditContactType>
      <DeleteContactType
        v-else-if="step === 3"
        @delete="deleteContact"
        ref="deleteContactType"
        :item="selectedItem"
      ></DeleteContactType>
    </Dialog>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import Table from "@/components/Maintenance/Table/Table.vue";
import Dialog from "@/components/Maintenance/Dialog/Dialog.vue";
import AddEditContactType from "@/components/Maintenance/Setting/ContactType/AddEditContactType.vue";
import DeleteContactType from "@/components/Maintenance/Setting/ContactType/DeleteContactType.vue";
interface IContactItem {
  id: string;
  type: string;
  description: string;
}
@Component({
  components: {
    Table,
    Dialog,
    AddEditContactType,
    DeleteContactType,
  },
})
export default class ContactType extends Vue {
  loading = false;
  // 1.Add ContactType 2.Edit ContactType 3.Delete ContactType
  step = -1;
  // dialog
  showDialog = false;
  dialogTitle = "";
  openDialog() {
    this.showDialog = true;
  }
  closeDialog() {
    this.showDialog = false;
  }
  // table
  selectedItem: IContactItem | null = null;
  tableHeaders = [
    {
      text: "Contact Type",
      sortable: false,
      value: "type",
    },
    {
      text: "Contact Description",
      sortable: false,
      value: "description",
    },
    {
      sortable: false,
      align: "right",
      value: "action",
    },
  ];
  items: IContactItem[] = [];
  getItems() {
    this.loading = true;
    setTimeout(() => {
      this.items = [
        {
          id: "1",
          type: "CON",
          description: "Contractor",
        },
        {
          id: "2",
          type: "SUP",
          description: "Supplier",
        },
      ];
      this.loading = false;
    }, 500);
  }
  // action
  openAddContact() {
    this.step = 1;
    this.dialogTitle = "Add Contact";
    this.openDialog();
    this.$nextTick(() => {
      (this.$refs.addEditContactType as AddEditContactType).resetForm();
    });
  }

  openEditContact(item: IContactItem) {
    this.step = 2;
    this.dialogTitle = "Edit Contact";
    this.selectedItem = item;
    this.openDialog();
    this.$nextTick(() => {
      (this.$refs.addEditContactType as AddEditContactType).setFormData(item);
    });
  }

  openDeleteContact(item: IContactItem) {
    this.step = 3;
    this.dialogTitle = "Delete Contact";
    this.selectedItem = item;
    this.openDialog();
  }

  async save() {
    const addEditContactTypeRef = this.$refs
      .addEditContactType as AddEditContactType;
    const result = await addEditContactTypeRef.validateFormData();
    if (result) {
      if (this.step === 1) {
        result.id = String(new Date().getTime());
        this.items.push(result as IContactItem);
      } else {
        Object.assign(this.selectedItem as IContactItem, result);
      }
      this.closeDialog();
    }
  }

  deleteContact(item: IContactItem) {
    const index = this.items.indexOf(item);
    this.items.splice(index, 1);
    this.closeDialog();
  }

  created() {
    this.getItems();
  }

  mounted() {
    this.$store.commit("MaintenanceStore/switchActionIcon", "mdi-file-export");
  }
}
</script>

<style lang="scss" scoped>
@import "./ContactType.scss";
</style>
